<template>
  <div class="tab-bar-container">
    <div>
      <div class="tab-bar-box">
        <div class="tab-bar-scroll">
          <div class="tags-wrap">
            <span
              v-for="(item, index) in navList"
              :key="index"
              class="arco-tag arco-tag-size-medium arco-tag-checked"
              :class="{
                'link-activated': item.name === route.name,
              }"
              @click="router.push({ name: item.name, query: item.query })"
            >
              <a-dropdown
                trigger="contextMenu"
                @select="actionSelect($event, index)"
              >
                <span class="tag-link"> {{ item.title }} </span>
                <span
                  @click.stop="delNav(index, item.name)"
                  class="arco-icon-hover arco-tag-icon-hover arco-icon-hover-size-medium arco-tag-close-btn"
                >
                  <icon-close />
                </span>
                <template #content>
                  <a-doption class="sperate-line" :value="1">
                    <icon-close />
                    <span>关闭当前标签页</span>
                  </a-doption>
                  <a-doption :value="2">
                    <icon-to-left />
                    <span>关闭左侧标签页</span>
                  </a-doption>
                  <a-doption class="sperate-line" :value="3">
                    <icon-to-right />
                    <span>关闭右侧标签页</span>
                  </a-doption>
                  <a-doption :value="4">
                    <icon-swap />
                    <span>关闭其它标签页</span>
                  </a-doption>
                  <!-- <a-doption :value="5">
                    <icon-folder-delete />
                    <span>关闭全部标签页</span>
                  </a-doption> -->
                </template>
              </a-dropdown>
            </span>
          </div>
        </div>
        <div class="tag-bar-operation"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import {
    listenerRouteChange,
    removeRouteListener,
  } from '@/utils/route-listener';
  import { useAppStore, useTabBarStore } from '@/store';
  import tabitem from './tab-item.vue';

  const route = useRoute();
  const router = useRouter();
  const navList = ref<any[]>([]);

  const navRoutePush = () => {
    if (!navList.value.some(({ name }) => name === route.name)) {
      if (route.query) {
        navList.value.push({
          title: route.meta.locale,
          name: route.name,
          query: route.query,
        });
      } else {
        navList.value.push({
          title: route.meta.locale,
          name: route.name,
        });
      }
    } else {
      const index = navList.value.findIndex(({ name }) => name === route.name);
      if (route.query) navList.value[index].query = route.query;
    }
  };

  watch(route, navRoutePush);
  navRoutePush();

  const delNav = (index: number, name: string) => {
    navList.value.splice(index, 1);
    if (name === route.name) {
      router.push({
        name: navList.value[index - 1].name,
        query: navList.value[index - 1].query,
      });
    }
  };

  const actionSelect = (value: number, index: number) => {
    if (value === 1 && navList.value.length) {
      navList.value.splice(index, 1);
      router.push({
        name: navList.value[index - 1].name,
        query: navList.value[index - 1].query,
      });
    }
    if (value === 2 && navList.value.length) {
      navList.value.splice(0, index);
    }
    if (value === 3 && navList.value.length) {
      navList.value.splice(index + 1);
    }
    if (value === 4 && navList.value.length) {
      navList.value = navList.value.filter((el, idx) => {
        return idx === index;
      });
      router.push({
        name: navList.value[0].name,
        query: navList.value[index - 1].query,
      });
    }
  };
</script>

<style scoped lang="less">
  .tab-bar-container {
    position: relative;
    background-color: var(--color-bg-2);
    .tab-bar-box {
      display: flex;
      padding: 0 0 0 20px;
      background-color: var(--color-bg-2);
      // border-bottom: 1px solid var(--color-border);
      .tab-bar-scroll {
        height: 32px;
        flex: 1;
        overflow: hidden;
        .tags-wrap {
          padding: 4px 0;
          height: 48px;
          white-space: nowrap;
          overflow-x: auto;

          :deep(.arco-tag) {
            display: inline-flex;
            align-items: center;
            margin-right: 6px;
            cursor: pointer;
            &:first-child {
              .arco-tag-close-btn {
                display: none;
              }
            }
          }
        }
      }
    }

    .tag-bar-operation {
      width: 100px;
      height: 32px;
    }
  }

  .tag-link {
    color: var(--color-text-2);
    text-decoration: none;
  }
  .link-activated {
    color: rgb(var(--link-6));
    .tag-link {
      color: rgb(var(--link-6));
    }
    & + .arco-tag-close-btn {
      color: rgb(var(--link-6));
    }
  }
  :deep(.arco-dropdown-option-content) {
    span {
      margin-left: 10px;
    }
  }
  .arco-dropdown-open {
    .tag-link {
      color: rgb(var(--danger-6));
    }
    .arco-tag-close-btn {
      color: rgb(var(--danger-6));
    }
  }
  .sperate-line {
    border-bottom: 1px solid var(--color-neutral-3);
  }

  .link-activated {
    color: rgb(var(--link-6));
    .tag-link {
      color: rgb(var(--link-6));
    }
    & + .arco-tag-close-btn {
      color: rgb(var(--link-6));
    }
  }
</style>
